<lv-input-group
  [lvPrefix]="prefixTpl"
  [lvSuffix]="suffixTpl"
  [lvDisabled]="lvDisabled"
  [lv-autocomplete]="lvAutocomplete"
  [ngModel]="value"
  (ngModelChange)="lvAutocomplete && inputChange($event)"
  [lvAutocompleteData]="lvAutocompleteData"
  [lvAutocompleteLoading]="lvAutocompleteLoading"
  [lvAutocompletePanelClass]="lvAutocompletePanelClass"
  [lvAutocompleteLabelTemplate]="lvAutocompleteLabelTemplate"
  [lvAutocompleteHighlightContent]="value"
  (lvAutocompleteInputChange)="autocompleteInputChange($event)"
>
  <div *ngIf="showPlaceHolder" class="lv-search-placeholder">{{ lvPlaceHolder }}</div>

  <input
    #input
    lv-input
    [ngModel]="value"
    [maxlength]="lvMaxLength"
    (ngModelChange)="inputChange($event)"
    (focus)="focus()"
    (keyup)="keyup()"
  />
</lv-input-group>
<ng-template #prefixTpl>
  <i
    lv-icon="lv-icon-search"
    [lvColorState]="true"
    [lvDisabled]="lvDisabled"
    class="lv-search-icon"
    (click)="search()"
  ></i>
</ng-template>
<ng-template #suffixTpl>
  <span class="lv-search-option">
    <img
      *ngIf="lvLoading"
      src="{{ assetsPrefixPath }}assets/webp/gray.png"
      alt="icon-loading"
      class="lv-icon-loading"
    />
    <button
      *ngIf="typeUtils.isRealString(value)"
      lv-button
      lvSize="auto"
      class="lv-search-clear"
      (click)="clear()"
      (mousedown)="$event.preventDefault()"
    >
      <i lv-icon="lv-icon-clear"></i>
    </button>
  </span>
</ng-template>
